<template>
<!--  侧边栏-->
  <div style="height: 100%; width: 7rem">
    <el-menu
        default-active="/"
        router="router"
        class="el-menu-vertical-demo"
        style="height: 100%"
    >
      <el-menu-item index="home">
        <span>首页</span>
      </el-menu-item>
<!--      订单中心只有用户显示-->
      <el-menu-item index="center">
        <span>订单中心</span>
      </el-menu-item>
<!--      操作面板只有管理员显示-->
      <el-sub-menu index="1" >
        <template #title>
          <span>操作面板</span>
        </template>
        <el-menu-item index="role">角色管理</el-menu-item>
        <el-menu-item index="user">用户管理</el-menu-item>
      </el-sub-menu>
      <!--      修改个人信息-->
      <el-menu-item>
        <span @click="changeEvent=true">修改个人信息</span>
      </el-menu-item>
<!--      退出登录-->
      <el-menu-item>
        <span @click="this.loginOut()">退出登录</span>
      </el-menu-item>
    </el-menu>
  </div>
  <el-dialog title="修改个人信息" style="width: 30rem;" v-model="this.changeEvent" :close-on-click-modal="false"
             :show-close="false">
    <el-form ref="userInformation" :model="this.userInformation" label-width="80px" style="margin-left: 3rem">
      <el-form-item label="账号">
        <!--v-model双向绑定数据-->
        <!-- 1rem===16px-->
        <el-input
            style="width: 15rem;"
            v-model="this.userInformation.account"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input
            style="width: 15rem;"
            v-model="this.userInformation.userName"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
            style="width: 15rem;"
            v-model="this.userInformation.userPwd"
        ></el-input>
      </el-form-item>
<!--      提交数据-->
      <el-form-item>
<!--        按钮 @click 点击事件，点击后执行里面的方法-->
        <el-button type="primary" @click="this.submitUserData()">提交</el-button>
        <el-button @click="this.closeDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import router from "@/router/index.js";
import request from "@/utils/request.js";

export default {
  // 加载、初始化的时候执行
  created() {
    //获取用户信息
    // this.getUser()
  },
  //数据
  data(){
    return{
      //是否显示操作面板
      isShow:true,
      // 弹出框
      changeEvent: false,
      // 登录用户信息
      userInformation: {},
    }
  },
  // 方法列表
  methods:{
    // 获取用户信息
    // getUser() {
    //   //从session中获取数据(在登陆后将用户数据保存在了浏览器的sessionStorage中了)
    //   this.userInformation = JSON.parse(sessionStorage.getItem("user"))
    //   if (this.userInformation.userRole==="20231111"){
    //     this.isShow=true;
    //   }
    // },
    // 退出登录
    loginOut(){
      // 清空浏览器的sessionStorage的数据
      sessionStorage.clear()
      //路由跳转到login
      router.push("/login")
    },
    // 修改用户信息
    submitUserData() {
      // 向后端接口发送post请求
      request.post("/user/update", this.userInformation).then(res => {
        // 后端返回数据，code===200代表操作成功
        if (res.data.code === '200') {
          //退出登录
          this.loginOut()
          // 跳出，不执行下面的
          return;
        }
        // 后端返回的code不是200，消息框提示account已存在，
        this.$message.error("account已存在")
      })
    },
    // 修改个人信息取消按钮
    closeDialog() {
      // 关闭弹窗
      this.changeEvent = false;
    },
  },


}

</script>

<style scoped>

</style>
